<template>
  <div class="banner">
    <van-swipe class="banner__left" :autoplay="3000" indicator-color="#FE4F02">
      <van-swipe-item
        v-for="item in bannerList"
        :key="item.id"
        class="banner__left__item"
      >
        <van-image :src="item.imageUrl" class="banner__left__item__img" />
      </van-swipe-item>
    </van-swipe>
    <div class="banner__right">
      <div class="banner__right__title">
        <img
          style="width: 100%"
          src="https://fast-learn.oss-cn-hangzhou.aliyuncs.com/tb/slogan.svg"
        >
      </div>
      <div class="banner__right__content">
        <van-image
          v-for="(item, index) in productList"
          :key="index"
          class="banner__right__content__img"
          :src="item.imageUrl"
        />
      </div>
      <div class="banner__right__bottom">
        <div class="banner__right__bottom__text">国民年货钜惠</div>
        <div class="banner__right__bottom__button">
          <div>主会场</div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
      productList: []
    }
  },
  watch: {
    '$store.state.homeList.banner': {
      immediate: true,
      handler(val) {
        this.bannerList = val.left
        this.productList = val.right
      }
    }
  }
}
</script>

<style lang="less">
.banner {
  height: 498px;
  display: flex;
  margin: 0 24px;
  &__left {
    width: 50%;
    &__item {
      &__img {
        height: 100%;
      }
    }
  }
  &__right {
    position: relative;
    width: 50%;
    height: 470px;
    margin-left: 18px;
    background: #f93d61;
    border-radius: 12px;
    &__title {
      border-radius: 12px;
    overflow: hidden;
      height: 85.18px;
    }
    &__content {
      height: auto;
      margin: 0 6px 6px 6px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      &__img {
        border-radius: 8px;
        margin-top: 6px;
        width: 162px;
        height: 172px;
        background: #ffffff;
      }
    }
    &__bottom {
      box-sizing: border-box;
      position: absolute;
      bottom: -28px;
      right: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      border: 4px solid #FECFA4;
      height: 80px;
      background-image: linear-gradient(0deg, #f7203b 0%, #fe3189 100%);
      border-radius: 46.5px;
      &__text {
        font-size: 30px;
        color: #fef1d2;
        font-weight: 600;
      }
      &__button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 112px;
        height: 64px;
        margin-left: 13px;
        margin-right: 8px;
        background-image: linear-gradient(0deg, #fef7a7 0%, #fef0dc 100%);
        border-radius: 46.5px;

        font-size: 25px;
        color: #ff2b16;
        letter-spacing: 0;
        font-weight: 600;
      }
    }
  }
}

// banner 指示器设置
.van-swipe__indicators {
  margin-bottom: 11px;
}
.van-swipe__indicator {
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
